<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改商品分类</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //获取页面初始数据
        let initGoodstypeName = $("#inputGoodstypeName").val();
        let initGoodstypeDescribe = $("#inputGoodstypeDescribe").val();

        //修改按钮点击事件
        $("#updata").click(function (){
            //获取输入数据，去除空格
            let tid = $("#tid").text();
            let inputGoodstypeName = $.trim($("#inputGoodstypeName").val());
            let inputGoodstypeDescribe = $.trim($("#inputGoodstypeDescribe").val());
            //判断是否为空数据
            if (inputGoodstypeName != ""){
                //与源数据进行比较
                if (inputGoodstypeName != initGoodstypeName || inputGoodstypeDescribe != initGoodstypeDescribe){
                    $.ajax({
                        url:"/admin/goodstype/updata",
                        method:"POST",
                        data:{"tid":tid,"goodstypeName":inputGoodstypeName,"goodstypeDescribe":inputGoodstypeDescribe},
                        success:function (data){
                            if (data){
                                location.href = "/admin/goodstype";
                            }else {
                                $("#modalText").text("有重复商品名！");
                                $("#myModal").modal('show');
                            }
                        }
                    })
                }else {
                    $("#modalText").text("数据未修改！");
                    $("#myModal").modal('show');
                }
            }else {
                $("#modalText").text("分类名不能为空！");
                $("#myModal").modal('show');
            }
        })

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputGoodstypeName").val(initGoodstypeName);
            $("#inputGoodstypeDescribe").val(initGoodstypeDescribe);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form>
                <div>
                    <label style="font-size: 20px">商品编号：</label>
                    <label id="tid" style="font-size: 20px" th:text="${goodstype.getTid()}"></label>
                </div>
                <div class="form-group">
                    <label for="inputGoodstypeName">分类名称</label>
                    <input type="text" class="form-control" id="inputGoodstypeName" th:value="${goodstype.getGoodstypeName()}" placeholder="请输入分类名称">
                </div>
                <div class="form-group">
                    <label for="inputGoodstypeDescribe">分类描述</label>
                    <textarea class="form-control" maxlength="50" id="inputGoodstypeDescribe" th:text="${goodstype.getGoodstypeDescribe()}" rows="3"></textarea>
                </div>

                <button id="updata" type="button" class="btn btn-primary">修改</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>